<template>
  <view class="container">
    <view
      class="search-box"
      style="
        width: 710rpx;
        height: 90rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
        border-radius: 18rpx;
        margin-left: 20rpx;
        overflow: hidden;
        display: flex;
      "
    >
      <view
        class="left"
        style="flex: 1; display: flex; align-items: center; padding-left: 20rpx"
      >
        <u--input
          placeholder="请输入手机号"
          v-model="value"
          border="none"
          type="number"
        />
      </view>
      <view
        class="right"
        style="
          width: 170rpx;
          background: linear-gradient(135deg, #fbc960, #f0b947);
          box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
          border-radius: 4rpx 18rpx 18rpx 4rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          font-size: 30rpx;
          color: #111111;
        "
        @click="onBtnSearchClick"
        >搜索</view
      >
    </view>

    <view
      class="u-inf"
      v-if="userInfo != null"
      style="
        width: 710rpx;
        margin-top: 20rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
        border-radius: 18rpx;
        margin-left: 20rpx;
        display: flex;
        justify-content: space-between;
        padding: 15rpx 25rpx;
      "
    >
      <view class="l">
        <view>{{ userInfo.nickName }}</view>
        <view style="margin-top: 10rpx">{{ userInfo.mobile }}</view>
      </view>
      <view
        class="r"
        style="display: flex; align-items: center; justify-content: center"
      >
        <view
          class="btn-c"
          style="
            background-color: #f0b947;
            color: #fff;
            padding: 8rpx 25rpx;
            border-radius: 10rpx;
          "
          @click="onChooseClick"
          >选择</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { GetUserInfo } from "../../../common/modules/orderAssistan";
import { uGetStorageSync, uNavigateBack } from "../../../utils/uniUtils";

export default {
  data() {
    return {
      value: "",
      userInfo: null,
    };
  },
  methods: {
    async onBtnSearchClick() {
      try {
        this.userInfo = null;
        let res = await GetUserInfo({
          msgId: "",
          storeId: uGetStorageSync("store").id,
          code: 10,
          data: {
            mobile: this.value,
          },
          sign: uGetStorageSync("orderSign"),
        });
        if (res && res?.code == 0) {
          this.userInfo = res.data;
          console.log("res", this.userInfo);
        }
      } catch (err) {
        console.log("err :>> ", err);
      }
    },
    onChooseClick() {
      uni.$emit("chooseMember", this.userInfo);
      uNavigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f7f7f7;
  padding-top: 32rpx;
}
</style>
